<script setup lang="ts">
import { defineEmits, ref} from "vue";
import { ElButton, ElMessage, ElMessageBox } from "element-plus";
import CdlDescriptions from "@/components/descriptions";
import { DescriptionsTree } from "@/interfaces/components/Descriptions";
import {useProjectApplicationInfoApi, useProjectApplicationResultApi} from "@/api/project/project";
import {Project} from "@/interfaces/views/project/project";
import {router} from "@/router";

const props = defineProps({
  id:{
    required: true,
    type: String
  },
  query: {
    required: true,
    type: Function
  }
})
const emit = defineEmits(["close"])
if(props.id) init()

const projectDescriptionsTree: DescriptionsTree<Project> = [
  {label: "托运人", prop: "shipperName", minWidth: 250},
  {label: "申请状态", prop: "applicationStatus", dict: "project_apply_state"},
  {label: "订单类型", prop: "typeId", dict: "project_type"},
  {label: "装货点", prop: "loadingAddress"},
  {label: "货物种类", prop: "cargoTypeId"},
  {label: "卸货点", prop: "unloadingAddress"},
  {label: "货物毛重", prop: "cargoGrossWeight"},
  // {label: "预估完成日期", prop: "expectedTime"},
  {label: "备注", prop: "remark"},
  {label: "申请时间", prop: "applicationTimeline", minWidth: 250}
]
const projectData = ref({})
function init(){
  useProjectApplicationInfoApi(props.id).then(res => {
    projectData.value = res.data
  })
}

/**
 * 同意
 */
function ratify(){
  useProjectApplicationResultApi({
    id: props.id,
    applicationStatus: true,
  }).then(() => {
    ElMessage.success("已同意！")
    emit("close")
    // props.query()
    router.push({
      path: "/projectManage/project/projectList/createAndModifyProject",
      query: {
        id: props.id,
        emit: 1
      }
    })
  })
}

/**
 * 驳回
 */
function reject(){
  ElMessageBox.prompt('', '请填写驳回原因', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    useProjectApplicationResultApi({
      id: props.id,
      applicationStatus: false,
      causeRemark: value
    }).then(() => {
      ElMessage.success("已驳回！")
      emit("close")
      props.query()
    })
  })
}
</script>

<template>
  <CdlDescriptions :model="projectData" :template-tree="projectDescriptionsTree"></CdlDescriptions>
  <div style="text-align: center; margin-top: 15px" v-show="projectData.applicationStatus === 1">
    <ElButton type="primary" @click="ratify">同意并新建</ElButton>
    <ElButton type="danger" @click="reject">驳回</ElButton>
  </div>
</template>

